<template>
  <Children>
    <template v-slot:qwe>
      <span>freelader</span>
    </template>
  </Children>

  <hr />
  <h3>一个人的信息</h3>
  <input type="text" v-model="person.firstName" />
  <input type="text" v-model="person.lastName" />

  <h6>{{ fullName }}</h6>

  <!-- 加一 -->
  <h2>当前的和 {{ num }}</h2>
  <button @click="num++">add 1</button>

  <hr />
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, watch } from "vue";
import Children from "@/components/Dome/Children01.vue";
// 导入ref
// import { ref, computed } from "vue";
export default defineComponent({
  name: "App",
  // 组合式API入口

  setup() {
    // 定义参数
    let person = reactive({
      firstName: "zhang",
      lastName: "san",
    });

    const fullName = computed(() => {
      return person.firstName + "--" + person.lastName;
    });

    // add 1
    const num = ref(0);
    watch(num, (newValue, oldValue) => {
      console.log(newValue, "new");
      console.log(oldValue, "old");
    });
    // 返回值
    return { person, fullName, num };
  },
  components: {
    Children,
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
